<!--
 * @Description: 左右分割，可拖拽
 * @Author: 
 * @Date: 
 * @LastEditors  : 
 * @LastEditTime :
 -->
<template>
  <div class="page_container">
    <slot name="left">请插入左边视图slot="left"</slot>
    <div class="line" @mousedown="draggle"></div>
    <slot name="right">请插入右边视图slot="right"</slot>
  </div>
</template>
<script>
export default {
  props: {
    leftWidth: {
      default: 200,
    },
    hidden_auto: {
      type: String,
      default: "hidden",
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      var left = this.$slots.left[0].elm;
      var right = this.$slots.right[0].elm;
      left.style.overflow = this.hidden_auto;
      right.style.overflow = "auto";
      left.style.width = this.leftWidth + "px";
      right.style.width = "calc(100% - " + left.style.width + ")";
    });
  },
  methods: {
    draggle(e) {
      var left = this.$slots.left[0].elm;
      var right = this.$slots.right[0].elm;
      var startX = e.clientX;
      var startWidth = left.clientWidth;
      document.onmousemove = function (e) {
        var offset = e.clientX - startX;
        // if (startWidth + offset > 500) {
        //   offset = 500 - startWidth;
        // } else if (startWidth + offset <= 0) {
        //   offset = -startWidth;
        // }
        left.style.width = startWidth + offset + "px";
        right.style.width = "calc(100% - " + left.style.width + ")";
      };
      document.onmouseup = function (evt) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>
<style lang="scss">
.page_container {
  width: 100%;
  height: 100%;
  display: flex;
  .line {
    height: 100%;
    width: 4PX;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    cursor: w-resize;
  }
}
</style>